<template>
  <div>
    <el-form v-model="plan">
<!--      活动开展时间-->
      <el-form-item
          label="举办时间"
          prop="time"
          :rules="[{require: true, message: '请输入策划时间', trigger: 'blur'}]">
        <div class="block">
          <el-date-picker
              v-model="plan.time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </div>
      </el-form-item>
<!--      活动策划附件上传-->
      <el-form-item label="上传附件" enctype="multipart/form-data" prop="formData">
        <el-button
            size="mini"
            type="primary"
            class="button"
            @click="goFile">
          <i class="el-icon-upload2"></i> 上传
        </el-button>

        <input
            type="file"
            style="display: none;"
            id="file"
            ref="files"
            accept="application/zip"
            @click="e => {e.target.value = '';}"
            @change="showChange($event)"
        />

        <input
            v-model="this.fileName"
            placeholder="文件大小不能超过10M  有且上传一个文件  仅支持zip"
            disabled="true"
            style="outline: none; border: 0; width: 500px; margin-left: 20px"
        />
      </el-form-item>
<!--      富文本编辑器-->
      <el-form-item>
        <quillEditor ref="getContentData"
                     v-model="planContent"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import quillEditor from './quillEdior'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      planContent: '',
      fileName: '',
      plan: {
        title: '',
        time: '',
        content: ''
      },
      file: '',
      pickerOptions: {
        shortcuts: [{
          text: '未来一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    getEditorContent() {
      this.plan.content = this.$refs.getContentData.content
    },
    //选择上传的文件
    goFile() {
      this.$refs.files.click();
    },
    //获取上传文件
    showChange(e) {
      let file = e.target.files[0];
      this.fileName = file.name;
      this.file = file;
    },
  }
}
</script>

<style scoped>

</style>
